<template>
  <el-table :data="songs" style="width: 98%" class="songcard">
    <el-table-column type="index" width="50"></el-table-column>
    <el-table-column width="100" class="pic">
      <template prop="album.picUrl" scope="scope">
        <img v-lazy="scope.row.album.picUrl" width="50" height="50" class="img" />
        <PlayIcon class="icon" />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="音乐标题"></el-table-column>
    <el-table-column prop="artists[0].name" label="歌手"></el-table-column>
    <el-table-column prop="album.name" label="专辑"></el-table-column>
    <el-table-column prop="duration" label="时长"></el-table-column>
  </el-table>
</template>

<script>
import PlayIcon from '../playicon/playicon'
export default {
  name: 'songcard',
  data () {
    return {

    }
  },
  props: {
    songs: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {

  },
  components: {
    PlayIcon
  }
}

</script>
<style lang='less' scoped>
.songcard {
  .columnBg {
    background-color: rgba(0, 0, 0, 0.2);
  }
  .pic {
    position: relative;
  }
  .icon {
    opacity: 1;
    position: absolute;
    top: 45%;
    left: 48%;
    transform: translate(-100%, -50%);
  }
}
</style>
